<template>
  <div class="flex  w-screen h-screen  relative justify-center items-center" style="">
    

    <div class="fixed flex w-full h-full resize rounded-lg"
      style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);">
      <v-overlay v-model="overlay" class="flex justify-center items-center w-full h-full" contained>
       <v-form ref="loginForm" class=" bg-slate-900/60  w-96 h-60 flex flex-col items-center justify-center"  action="http://localhost:8080/login" method="post">
        
      <v-text-field class="w-3/4" label="用户名" required placeholder="请输入用户名" name="username" v-model="username">
      </v-text-field>
      <v-text-field class="w-3/4" label="密码" required placeholder="请输入密码" name="password" v-model="password">
      </v-text-field>
      <div class="w-1/4"><v-btn class="mt-0"  block @click="Login">点击登陆</v-btn></div>
     </v-form>
      </v-overlay>
      <LeftNav></LeftNav>
      <MainContainer></MainContainer>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import LeftNav from './components/LeftNav.vue';
import MainContainer from './components/MainContainer.vue';
import Game from './pages/game.vue';
  export default {
    name: 'App',
    data(){
        return{
          username:'',
          password:"",
          overlay:true,
          Islogin:false
        }   
    },
    methods:{
      Login(){ const formData=new FormData();
  formData.append("username",this.username)
  formData.append("password",this.password)

         axios.post('http://127.0.0.1:8080/login',formData).then(response=>{
          alert("登陆成功");
          localStorage.setItem("username",this.username)
          this.Islogin=true;
         localStorage.setItem("IsLogin",this.Islogin);
          
          console.log(response.data);
          console.log(response);
          setTimeout(() => {
            location.reload();
            console.log(localStorage.getItem('IsLogin'));
          }, 1000);
          
        }).catch(err=>{
          console.log(err);
          if(err.message=='Network Error'){
            alert("无法连接到服务器");
            return
          }
          alert('用户名或者密码错误')
        })
      }
    },

    computed:{
      overlay(){
        return !localStorage.getItem('IsLogin');
      }
    },
    components: {
      LeftNav,
      MainContainer,
      Game
    }
  }
</script>